<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Table</title>
<style>
  /* 样式稍后添加 */
  .table-container {
    position: relative;
  }
  #myTable {
    border-collapse: collapse;
  }
  #myTable td {
    border: 1px solid #000;
    min-width: 50px;
    height: 20px;
    background-color: white;
  }
  #myTable td.selected {
    background-color: lightblue;
  }
  .rubberband {
    position: absolute;
    border: 1px dashed #000;
    pointer-events: none; /* 确保橡皮筋不会干扰鼠标事件 */
    display: none;
  }
</style>
</head>
<body>

<div class="table-container">
  <table id="myTable">
    <!-- 表格内容将由 JavaScript 动态生成 -->
  </table>
  <div class="rubberband" id="rubberband"></div>
</div>

<script>
 // JavaScript 代码片段

// 动态创建表格
function createTable(rows, cols) {
  const table = document.getElementById('myTable');
  for (let i = 0; i < rows; i++) {
    const tr = table.insertRow();
    for (let j = 0; j < cols; j++) {
      const td = tr.insertCell();
      // 为了演示，我们在每个单元格中放入一些文本
      td.appendChild(document.createTextNode('Cell ' + (j + 1)));
      td.addEventListener('click', function() {
        // 单元格选中效果
        if (this.classList.contains('selected')) {
          this.classList.remove('selected');
        } else {
          this.classList.add('selected');
        }
      });
    }
  }
}

createTable(10, 10); // 创建一个 10x10 的表格

let startX, startY, isDragging = false;
const rubberband = document.getElementById('rubberband');

document.addEventListener('mousedown', function(e) {
  // 确定鼠标按下的位置
  startX = e.pageX;
  startY = e.pageY;
  isDragging = true;
  rubberband.style.width = '0px';
  rubberband.style.height = '0px';
  rubberband.style.display = 'block';
  rubberband.style.left = `{startX}px`;
  rubberband.style.top = `{startY}px`;
});

document.addEventListener('mousemove', function(e) {
  if (isDragging) {
    // 根据鼠标位置更新橡皮筋的大小和位置
    const width = Math.abs(e.pageX - startX);
    const height = Math.abs(e.pageY - startY);
    rubberband.style.width = `{width}px`;
    rubberband.style.height = `{height}px`;
    rubberband.style.left = `{(e.pageX < startX ? e.pageX : startX)}px`;
    rubberband.style.top = `{(e.pageY < startY ? e.pageY : startY)}px`;
  }
});

document.addEventListener('mouseup', function(e) {
  if (isDragging) {
    isDragging = false;
    rubberband.style.display = 'none';
    // 这里可以处理橡皮筋选区所包含的单元格
  }
});

// 这里应该还有更多的代码来处理单元格大小的实际调整和合并单元格的逻辑
// 但这些功能通常更复杂，需要更细致的事件处理和状态管理

</script>

</body>
</html>
